<template>
	<view style="background-color: #f6f6f6;margin-bottom: 20px">
		<view style="margin: 0 20px;padding-top: 20px;">
			<uni-row class="demo-uni-row">
				<uni-col :span="8" style="display: inline-flex;" >
					<uni-icons size="23" type="fire" @click="writeCenter"></uni-icons>
					<view style="display: inline-flex;" @click="writeCenter">创作中心</view>
				</uni-col>
				<uni-col :push="9" :span="5">
					<uni-icons size="25" type="scan" @click="scan"></uni-icons>
					<uni-icons size="25" style="padding-left: 15px;" type="paperplane" @click="paperplane"></uni-icons>
					<uni-icons size="25" style="padding-left: 15px;" type="gear" @click="gear"></uni-icons>
				</uni-col>
			</uni-row>
		</view>
		<!-- 个人信息 -->
		<view style="margin: 20px 10px;background-color: #f6f6f6;">
			<view class="info" style="height: 200rpx;" @click="selfPage">
				<img :src="user.avatar" alt="" class="avatar" />
				<label class="name">{{user.name}}</label>
				<label class="detail">个人主页 ></label>
			</view>
			<view style="margin: 0px 20rpx;text-align: center;">
				<uni-row class="demo-uni-row" style="margin-top: 20px;">
					<uni-col :span="7">
						<view>0</view>
						<view style="margin-top: 20rpx;">关注</view>
					</uni-col>
					<uni-col :offset="1" :span="7">
						<view>0</view>
						<view style="margin-top: 20rpx;">粉丝</view>
					</uni-col>
					<uni-col :offset="1" :span="7">
						<view>0</view>
						<view style="margin-top: 20rpx;">获赞</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<!-- other -->
		<view class="box">
			<uni-row class="demo-uni-row" style="margin-top: 20px;text-align: center;">
				<uni-col :span="5" >
					<view @click="todoPage"><uni-icons size="30" type="calendar"></uni-icons></view>
					<view style="margin-top: 20rpx;"@click="todoPage">我的订单</view>
				</uni-col>
				<uni-col :offset="1" :span="5">
					<view @click="todoPage"><uni-icons size="30" type="bars"></uni-icons></view>
					<view style="margin-top: 20rpx;" @click="todoPage">浏览历史</view>
				</uni-col>
				<uni-col :offset="1" :span="5">
					<view @click="todoPage"><uni-icons size="30" type="email"></uni-icons></view>
					<view style="margin-top: 20rpx;" @click="todoPage">我的消息</view>
				</uni-col>
				<uni-col :offset="1" :span="5">
					<view @click="todoPage"><uni-icons size="30" type="color"></uni-icons></view>
					<view style="margin-top: 20rpx;" @click="todoPage">成为作家</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="box">
			<view class="" >
				<view v-for="item,index in otherConfigs" :key="index"  class="mini-func" style="display: inline-block;">
					<uni-icons :type="item.icon" size="40" style="display: block;" @click="todoPage"></uni-icons>
					<view style="margin-top: 10px;" @click="todoPage">
						{{item.label}}
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					avatar: "https://ts1.cn.mm.bing.net/th?id=OIP-C.ZMCPNd50c-LitjFqYFoXLgAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
					name: "梁汉强"
				},
				otherConfigs:[{id:1, icon:'arrow-down',label:'我的下载',url:''},
				{id:2, icon:'gift',label:'游戏中心',url:''},
				{id:3, icon:'email',label:'创作中心',url:''},
				{id:4, icon:'wallet',label:'阅读偏好',url:''},
				{id:5, icon:'compose',label:'笔记书摘',url:''},
				{id:6, icon:'eye',label:'看过的人',url:''},
				{id:7, icon:'hand-up',label:'赞过的短剧',url:''},
				{id:8, icon:'paperplane',label:'番茄指南',url:''},
				{id:9, icon:'heart',label:'我的公益',url:''},
				{id:10, icon:'contact',label:'邀请有礼',url:''},
				{id:11, icon:'chatboxes',label:'反馈与帮助',url:''}]
			}
		},
		methods: {
			// 创作中心按钮事件
			writeCenter(){
				uni.showToast({
					icon:'none',
					title:"该功能待做"
				})
			},
			scan(){
				uni.showToast({
					icon:'none',
					title:"该功能待做"
				})
			},
			// 点击
			paperplane(){
				uni.showToast({
					icon:'none',
					title:"该功能待做"
				})
			},
			// 设置点击
			gear(){
				uni.showToast({
					icon:'none',
					title:"该功能待做"
				})
			},
			// 跳转到个人主页
			selfPage(){
				uni.showToast({
					icon:'none',
					title:"个人主页未做"
				})
			},
			todoPage(){
				uni.showToast({
					icon:'none',
					title:"‘我的’页面的功能都没做，别点了"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		display: inline-flex;
		align-items: center;
		width: 100%;
		.avatar {
			border-radius: 80rpx;
			width: 150rpx;
		}
		.name{
			margin-left: 20rpx;
			font-size: 40rpx;
			font-weight: 900;
		}
		.detail{
			float: right;
			margin-left: auto;
			color: #d6d6d8;
		}
	}


	.box {
		margin: 10px;
		padding: 20px;
		background-color: #fff;
	}

	.mini-func {
		width: 33%;
		margin-top: 50rpx;
		text-align: center;
	}

	
</style>